<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>鑫多多</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<script src="../js/angular/angular.min.js"></script>
		<script src="../js/angular/angular-resource.js"></script>
		<script src="../js/angular/common.js"></script>
		<script src="../js/mui.min.js"></script>
		<script src="../js/common.js"></script>
		<script src="../js/service/goodsService.js"></script>
		<link rel="stylesheet" href="../css/mui.min.css">
		<link href="../css/icons-extra.css" rel="stylesheet" />
		<link href="../css/iconfont.css" rel="stylesheet" />
		<link href="../css/style.css" rel="stylesheet" />
		<script src="../js/mui.zoom.js"></script>
		<script src="../js/mui.previewimage.js"></script>
		<link href="../css/image.css" rel="stylesheet" />
		
		
	</head>

	<body ng-app="mainApp" ng-controller="goodsDetailCtrl">

		<header class="mui-bar mui-bar-nav mui-bar-detail">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">产品详情</h1>
		</header>
		<nav class="mui-bar mui-bar-tab pro_bar">
			<a class=" mui-col-xs-2" style="margin-left: 20px;" ng-click="myShoppingCart()">
				<span class="mui-icon mui-icon-extra mui-icon-extra-cart"></span>
				<span class="mui-tab-label">购物车</span>
			</a>
			<a class="mui-tab-item mui-btn mui-btn-warning mui-col-xs-4" href="#specification">

				<span class="mui-tab-label">加入购物车</span>
			</a>
		</nav>
		<div id="specification" class="mui-popover mui-popover-action mui-popover-bottom specification" style="display: none;">

			<div class="mui-table-view mui-media spe_top">
				<a href="#specification"><i class="mui-icon mui-icon-close mui-pull-right"></i></a>
				<div class="mui-pull-left media-object-wrap">
					<img ng-if="goods.iconUrl!=undefined&&goods.iconUrl!=''" class="mui-media-object" ng-src="{{baseUrl}}/dapi/download/getImageIO?imgUrl={{goods.iconUrl}}"></img>
					<img ng-if="goods.iconUrl==undefined||goods.iconUrl==''" class="mui-media-object" ng-src="../images/goodsDefault.gif"></img>
				</div>
				<div class="mui-media-body price">
					¥{{(goods.price)*(goodsWeight.minWeight+goodsWeight.maxWeight)/2*goodsNum}} +¥{{goodsWeight.jgf*(goodsWeight.minWeight+goodsWeight.maxWeight)/2*goodsNum}}
					<p>已选{{goodsNum}}件</p>
				</div>

			</div>

			<ul class="mui-table-view  spe_select ">
				<li class="mui-table-view-cell spe_in" style="height: 200px;">
					<span>规格</span>
					<div class="mui-scroll-wrapper" style="margin-top:30px;">
						<div class="mui-scroll">
							<ul class="mui-table-view mui-table-view-radio">
								<li class="mui-table-view-cell  spe_cell  " ng-class="{'mui-selected':item.id==goodWeight.id}" ng-click="selectWeight(item)" ng-repeat="item in goods.goodsWeightList">
									<a class="mui-navigate-right">{{item.minWeight}}-{{item.maxWeight}}g 加工费：¥{{item.jgf}}元/克</a>
								</li>
							</ul>
						</div>
					</div>
				</li>
			</ul>
			<div>
				<input type="text" placeholder="请备注..." ng-model="content"/>
			</div>
			<div class="mui-content-padded mum_box_wrap">

				数量
				<div class="mui-numbox">
					<button class="mui-btn mui-btn-numbox-minus" type="button" ng-disabled="goodsNum==0">-</button>
					<input class="mui-input-numbox" type="number" ng-model="goodsNum">
					<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
				</div>
			</div>
			<div class="spe_btn">
				<button type="button" class="mui-btn mui-btn-warning  mui-pull-left mui-col-xs-12" ng-click="shoppingCart()">加入购物车</button>
			</div>

		</div>
		<!-- 主页面内容容器 -->
		<div class="mui-content ">
			<!-- 主界面具体展示内容 -->
			<div ng-if="picLength==0" class="pro_img">
				<img class="mui-media-object" src="{{baseUrl+'/dapi/download/getImageIO?imgUrl='+goods.iconUrl|getImgUrl}}" data-preview-src="" data-preview-group="1"></img>
			</div>
			<div id="slider" class="mui-slider" ng-if="picLength!=0">
				<div class="mui-slider-group mui-slider-loop">
					<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#">
							<img ng-src="{{baseUrl}}/dapi/download/getImageIO?imgUrl={{pisLast.picUrl}}"  data-preview-src="" data-preview-group="1">
						</a>
					</div>
					<!-- 第一张 -->
					<div class="mui-slider-item" ng-repeat="pic in picList">
						<a href="#">
							<img ng-src="{{baseUrl}}/dapi/download/getImageIO?imgUrl={{pic.picUrl}}" data-preview-src="" data-preview-group="1">
						</a>
					</div>
					<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#">
							<img ng-src="{{baseUrl}}/dapi/download/getImageIO?imgUrl={{pisFirst.picUrl}}" data-preview-src="" data-preview-group="1">
						</a>
					</div>
				</div>
				<div ng-if="picLength>0" class="mui-slider-indicator">
					<div class="mui-indicator mui-active"></div>
					<div class="mui-indicator " ng-repeat="pic in picDiv"></div>
				</div>
			</div>

			<div class="intro">
				<div class="mui-media-body ">{{goods.title}} </div>
				<div class="mui-media-body price">¥{{goods.price}}</div>
			</div>
			<div class="property  evaluate">
				<h4>基本信息</h4>
				<ul class="mui-table-view">
					<li class="mui-table-view-cell"><span>名称 </span><span>{{goods.title}}</span></li>
					<li class="mui-table-view-cell"><span>编号 </span><span>{{goods.identifier}}</span></li>
					<li class="mui-table-view-cell"><span>单价 </span><span>{{goods.price}}</span></li>
					<li class="mui-table-view-cell"><span>类型 </span><span>{{goods.typeName}}</span></li>
					<li class="mui-table-view-cell"><span>库存 </span><span>{{goods.number}}</span></li>
					<li class="mui-table-view-cell"><span>样式 </span><span>{{goods.gstyleName}}</span></li>
					<li class="mui-table-view-cell"><span>描述 </span><span>{{goods.des}}</span></li>
				</ul>

			</div>
			<div class="property  evaluate weight_range">
				<h4>商品规格</h4>
				<ul class="mui-table-view">
					<li class="mui-col-xs-4 mui-pull-left active" ng-repeat="goodWeight in goods.goodsWeightList"><span>{{goodWeight.minWeight}}-{{goodWeight.maxWeight}}g</span></li>
				</ul>
			</div>
			<div class="evaluate">

				<h4>商品评价（{{eveCount}}）</h4>
				<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed ">

					<li class="mui-table-view-cell" ng-repeat="eva in evaluateList">
						<div class="mui-table">
							<div class="mui-table-cell mui-col-xs-10">
								<h5 class="mui-ellipsis">{{eva.publishUserName}}</h5>

								<p class="mui-h6 mui-ellipsis">{{eva.content}}</p>
							</div>
							<div class="mui-table-cell mui-col-xs-2 mui-text-right">
								<span class="mui-h5">{{eva.publishTime|timeStr}}</span>
							</div>
						</div>
					</li>
				</ul>
				<div class="mui-content-padded">
					<button type="button" class="mui-btn mui-btn-outlined mui-btn-danger" ng-click="getAllEva()">
					查看全部评价
			</button>
				</div>
			</div>
			<div class="evaluate pro_img">
				<h4>产品图片{{picList.length}}</h4>
				<ul ng-if="goods.ifPic" class="mui-table-view">
					<li class="mui-table-view-cell" ng-repeat="pic in picList"> <img ng-src="{{baseUrl}}/dapi/download/getImageIO?imgUrl={{pic.picUrl}}" data-preview-src="" data-preview-group="1"></li>
				</ul>
				<ul ng-if="!goods.ifPic" class="mui-table-view">
					<li class="mui-table-view-cell">暂无相关图片</li>
				</ul>
			</div>
		</div>
		<script type="text/javascript">
			mui.init();
			mui('.mui-scroll-wrapper').scroll();
			mainApp.controller('goodsDetailCtrl', function($scope, $http, goodsService) {
				mui.plusReady(function() {
					$scope.baseUrl = baseUrl;
					var success_e = function(data) {
						$scope.evaluateList = data.data.list;
						$scope.eveCount = data.data.count;
					}
					var success_p = function(data) {
						$scope.picList = data.data;
						$scope.pisFirst;
						$scope.pisLast;
						$scope.picLength = 0;
						if($scope.picList != null) {
							$scope.pisFirst = $scope.picList[0];
							$scope.picLength = $scope.picList.length;
							$scope.pisLast = $scope.picList[$scope.picLength - 1];
							//$scope.picDiv=$scope.picList.pop();
						}
						mui.previewImage();
					}
					//查询商品信息
					function getGoodsDetails(goodsId) {
						goodsService.getGoodsDetails(goodsId, function(data) {
							$scope.goods = data.data;
							$scope.kucun = $scope.goods.number;
							$scope.selectGoodPrice = $scope.goods.price;
						}, error);
					};
					//查询购物车
					function getCartByUGId(goodsId, goodsWeightId) {
						goodsService.getCartByUGId(goodsId, goodsWeightId, function(data) {
							if(data.data != null) {
								$scope.uCart = data.data;
								$scope.goodsNum = $scope.uCart.number;
							}
						}, error);
					}
					var self = plus.webview.currentWebview();
					getGoodsDetails(self.goodsId);
					getGoodsEvaluate(self.goodsId);
					getGoodsPic(self.goodsId);

					//查询商品图片
					$scope.goodsNum = 1;
					$scope.goodsWeight = {
						"minWeight": 1,
						"maxWeight": 1,
						"jgf": 0
					};
					$scope.goodWeightCheck = false;
					$scope.selectWeight = function(goodsWeight) {
						$scope.goodWeightCheck = true;
						$scope.goodsWeight = goodsWeight;
						getCartByUGId($scope.goods.id, goodsWeight.id); //查询是否存在于购物车
					}
					$scope.getAllEva = function() {
						mui.openWindow({
							url: 'product_comments.html',
							id: 'product_comments' + new Date().getMilliseconds(),
							//preload: true,
							show: {
								aniShow: 'pop-in'
							},
							waiting: {
								autoShow: false
							},
							extras: { //参数传递
								goodsId: self.goodsId,
								iconUrl: $scope.goods.iconUrl,
								ifPic: $scope.goods.ifPic,
								gprice: $scope.goods.price,
								goodsNum: $scope.goodsNum
							}
						});
					}
					//加入购物车
					$scope.shoppingCart = function() {
						if($scope.goodsNum == 0) {
							mui.alert("请选择商品数量");
							return;
						}
						if(!$scope.goodWeightCheck) {
							mui.alert("请选择商品规格");
							return;
						}
						$scope.shopcart = {
							"goodsId": self.goodsId,
							"goodsWeightId": $scope.goodsWeight.id,
							"number": $scope.goodsNum,
							"content": $scope.content
						};
						goodsService.addShopCart($scope.shopcart, function(data) {
							mui.alert("加入购物车成功！");
//							document.getElementById("specification").style.display="none";
							location.reload();
						}, error);
					}
					//我的购物车
					$scope.myShoppingCart = function() {
						mui.openWindow({
							url: 'shoppingCart.html',
							id: 'shoppingCart' + new Date().getMilliseconds(),
							preload: true,
							show: {
								aniShow: 'pop-in'
							},
							waiting: {
								autoShow: false
							}
						});
					}
					//客服
					$scope.myCustomService = function() {
						mui.openWindow({
							url: 'baidushangqiao.html',
							id: 'msg',
							preload: true,
							show: {
								aniShow: 'pop-in'
							},
							waiting: {
								autoShow: false
							},
							extras: { //参数传递
							}
						});
					}

					function getGoodsPic(goodId) {
						goodsService.getGoodsPic(goodId, success_p, error);
					}
					//查询评价信息
					function getGoodsEvaluate(goodsId) {
						goodsService.getGoodsEvaluate(goodsId, 1, 4, success_e, error);
					};
				});
			});
		</script>

</html>